<template>
  <div :class="{ subPage: true, ipxPage: ifIphonex }">
    <div>
        <nav-bar
        :title="navTitle"
        position="center"
        color='#fff'
        :rowColor="'black'"
        :goBack="goBack"
        :isMsg='false'
        fontColor='#000' ></nav-bar>
    </div>
    <div class="topBox">{{ deptInfo.dept_name }}</div>
    <div :class="['outlineContent',{'whiteBg':dept_list.length == 0}]" >

      <!-- 工具盒子用来获取 展开后的高度 、不显示 -->
      <div class="centerBoxShow prey" >
        {{ dept_info }}
      </div>

      <div :class="[centerBox,'flexibleBox']" :style="{'height': centerBox === 'centerBoxShow'?preyHeight+'px':''}">
        {{ dept_info }}
      </div>
      <div class="showHide">
<!--        <div @click="showHide">-->
<!--          -->
<!--        </div>-->
        <img :src="openUrl" @click="showHide"/>
      </div>
      <div class="centBox">
        <div class="titBox">选择开药门诊时间</div>
        <div class="tabsClass">
          <div :class="leftTabs" @click="tabsClick(0)">
            今天&nbsp;&nbsp;{{ today}}
          </div>
          <div :class="rightTabs" @click="tabsClick(1)">
            明天&nbsp;&nbsp;{{ tomorrow }}
          </div>
        </div>
        <div class="bomAuto clearfix">
          <div class="bomBox clearfix" v-if="dept_list.length != 0">
            <div
              class="bomItem clearfix"
              v-for="(item, index) in dept_list"
              :key="index"
            >
              <div class="dateItem">
                {{ item.period }}&nbsp;&nbsp;{{ item.begin_time }}-{{
                  item.end_time
                }}
              </div>
              <div class="numItem">¥&nbsp;{{ registration_fee }}</div>
              <button class="btnItem" open-type="getUserInfo" plain="true" @click.stop @getuserinfo="about($event, item)">
                <span>预约</span>
              </button>
              <div class="txtTiem">剩余{{ item.useful_tick }}</div>
            </div>
          </div>
        </div>
        <div class="nullBox" v-if="dept_list.length == 0 && !delayShowData">
          <div class="searchDefault">
            <img :src="nullUrl" />
          </div>
        </div>
      </div>
      <div class="modalClass" v-if="showModal">
        <div class="modalBox">
          <div class="closeBox" @click="close">
            <img :src="closeImg" />
          </div>
          <div class="modalTit">
            <img :src="descBgUrl" />
          </div>
          <div class="modalCenter">
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >预约挂号针对<span class="itemSpanRed">复诊患者</span
                >,新患者及复诊超过三个月的患者,请线下医院就诊</span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >预约挂号时间为:<span class="itemSpanRed"
                  >24小时制</span
                ></span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >您与医生的<span class="itemSpanRed">交流时长为8分钟</span
                >,请把握时间</span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >三个月的复诊患者<span class="itemSpanRed">如需开药</span
                >,请在下一页面<span class="itemSpanRed"
                  >病情描述上传既往处方笺、病历</span
                ></span
              >
            </div>
            <div class="dataBox">
              <span class="itemPie"></span>
              <span class="itemSpan"
                >开具药品由快递配送,<span class="itemSpanRed"
                  >邮费到付</span
                ></span
              >
            </div>
          </div>
          <button class="modalFooter" open-type="getUserInfo" plain="true"  @getuserinfo="toDetails($event,5)">立即申请</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/api'
import { mapState } from 'vuex'
import navBar from '@/components/navBar'
import nim from '@/utils/nim'
import storage from '@/utils/storage'
let app = getApp()
let store = app.store
export default {
  components: {
    navBar
  },
  data () {
    return {
      showModal: false,
      modalStyle: 'none',
      iconUrl: '/static/images/ImageText.png',
      doctorList: [],
      doctorInfo: {},
      interrogationKey: '',
      descBgUrl: '',
      centerBox: 'centerBoxHide',
      nullUrl: '',
      leftTabs: 'itemTabs2',
      rightTabs: 'itemTabs',
      dept_list: [],
      dept_info: '',
      dept_name: '',
      today: '',
      tomorrow: '',
      dateTime: [],
      openUrl: '',
      closeImg: '',
      registration_fee: '',
      delayShowData: true,
      preyHeight: 110,
      navTitle: '',
      deptInfo: {},
      theBook: true
    }
  },
  computed: {
    ...mapState(['ifIphonex'])
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data())
    this.deptInfo = JSON.parse(options.data) || '门重门慢'
    if (this.deptInfo.dept_name === '门重门慢') {
      this.navTitle = '门诊重症'
    } else {
      this.navTitle = '专科开药'
    }
  },
  onShow () {
    this.showModal = false
    let doctor_id = this.$route.query.doctor_id
    this.imgUrl = api.imgUrl
    this.openUrl = this.imgUrl + 'arrow_open.png'
    this.closeImg = this.imgUrl + 'close.png'
    this.descBgUrl = this.imgUrl + 'bg_professor_video_desc.png'
    this.leftTabs = 'itemTabs2'
    this.rightTabs = 'itemTabs'
    this.nullUrl = this.imgUrl + 'noSpecialty.png'
    this.centerBox = 'centerBoxHide'
    this.registration_fee = ''
    this.getDateTime()
  },
  watch: {
    sessionsList: function (oldValue, newValue) {
      // this.dealData()
    }
  },
  methods: {
    close () {
      this.showModal = false
      // this.hx_index = 0
    },
    initBoxHeight () {
      var query = wx.createSelectorQuery()
      query.select('.prey').boundingClientRect((res) => {
        console.log(res)
        this.preyHeight = res.height
        console.log(this.preyHeight)
      }).exec()

    },
    // 改变tab
    handleChange (value) {
      this.tab = value
    },
    about (e, item) {
      // 取消 视频问诊说明弹窗
      // this.showModal = true;
      this.doctorInfo = item
      Object.assign(this.doctorInfo, { dept_name: this.dept_name })
      this.toDetails(e, 5) // 点击预约直接表示立即申请
    },
    getDateTime () {
      let m1
      let d1
      let m2
      let d2
      let s1
      let s2
      let y1
      let y2
      let s3
      let s4
      //今天的时间
      var day1 = new Date()
      day1.setTime(day1.getTime())
      // var s2 = (((day2.getMonth()+1) * 1) < 10 ? ('0' + ((day2.getMonth()+1) * 1)) : ((day2.getMonth()+1) * 1)) + "-" + day2.getDate() < 10 ? '0' + day2.getDate() : day2.getDate();
      m1 = day1.getMonth() + 1
      d1 = day1.getDate()
      m1 = m1 * 1 < 10 ? '0' + m1 : m1
      d1 = d1 * 1 < 10 ? '0' + d1 : d1
      y1 = day1.getFullYear()
      //明天的时间
      var day2 = new Date()
      day2.setTime(day2.getTime() + 24 * 60 * 60 * 1000)
      m2 = day2.getMonth() + 1
      d2 = day2.getDate()
      m2 = m2 * 1 < 10 ? '0' + m2 : m2
      d2 = d2 * 1 < 10 ? '0' + d2 : d2
      y2 = day2.getFullYear()
      s1 = m1 + '-' + d1
      s2 = m2 + '-' + d2
      s3 = y1 + '' + m1 + '' + d1
      s4 = y2 + '' + m2 + '' + d2
      this.today = m1 + '月' + d1 + '日'
      this.tomorrow = m2 + '月' + d2 + '日'
      console.log(s3, 's3')
      console.log(s4, 's4')
      this.dateTime = [s3, s4]
      let dept_id = this.deptInfo.dept_id
      this.getDeptList(dept_id, s3)
    },
    getDeptList (e, j) {
      console.log(e)
      this.delayShowData = true
      this.$api
        .getDeptList({ dept_id: e, arrange_day: j, is_expert_no: '4' }, { showLoading: true })
        .then((res) => {
          console.log(res)
          this.dept_info = res.data.dept_info ? res.data.dept_info : ''
          this.dept_name = res.data.dept_name
          this.registration_fee = res.data.registration_fee
          if (!this.registration_fee || this.registration_fee == 0) {
            this.registration_fee = '0.0'
          } else {
            this.registration_fee = parseFloat(
              this.registration_fee * 0.01
            ).toFixed(1)
          }
          let list = []
          res.data.diagnose_times.forEach((item) => {
            if (item.available) {
              item.dept_limit = res.data.dept_limit
              list.push(item)
            }
          })
          this.dept_list = list

          if (res.msg == 0) {
            this.nullUrl = this.imgUrl + 'empty_view_no_arrange.png'
          } else {
            this.nullUrl = this.imgUrl + 'noSpecialty.png'
          }
          console.log(this.dept_list)
          this.delayShowData = false
          setTimeout(() => {
            this.initBoxHeight() // 获取滑动盒子后的高度
          }, 300)
        })
    },
    tabsClick (e) {
      let dept_id = this.deptInfo.dept_id
      if (e == 0) {
        this.leftTabs = 'itemTabs2'
        this.rightTabs = 'itemTabs'
      } else {
        this.leftTabs = 'itemTabs'
        this.rightTabs = 'itemTabs2'
      }
      this.getDeptList(dept_id, this.dateTime[e])
    },
    showHide () {
      this.centerBox =
        this.centerBox == 'centerBoxShow' ? 'centerBoxHide' : 'centerBoxShow'
      this.openUrl =
        this.openUrl == this.imgUrl + 'arrow_open.png'
          ? this.imgUrl + 'arrow_close.png'
          : this.imgUrl + 'arrow_open.png'
      console.log(this.openUrl)
    },
    getDoctor (e, doctor_id) {
      let list = []
      this.$api
        .doctorList({ dept_id: e }, { showLoading: true })
        .then((res) => {
          console.log(doctor_id)
          if (doctor_id && doctor_id != 'undefined') {
            res.data.forEach((item) => {
              if (item.doctor_id == doctor_id) {
                list.push(item)

              }
            })
          } else {
            list = res.data
          }
          this.doctorList = list
        })
    },
    toDetails (e, value) {
      this.doctorInfo.registration_fee = this.registration_fee
      this.judgeUserInfo(e, value)
    },
    goBack () {
      this.$router.go(-1)
    },
    // 用户是否登入判断
    judgeUserInfo (e, value) {
      if (e.mp.detail.rawData) {
      //用户按了允许授权按钮
        console.log('用户按了允许授权按钮')
        //判断是否登陆(是否有患者token)
        var token = this.$storage.getToken()
        if (token) {
        //判断是否认证
          var that = this
          that.$api
            .get_user_info('', { showLoading: true })
            .then(function (data) {
              let accountInfo = data.data[0]
              accountInfo.headImg = data.data[0].head_portrait
                ? data.data[0].head_portrait
                : ''
              that.$storage.setAccountInfo(accountInfo)
              if (accountInfo.netease_token) {
                nim.login(accountInfo)
              }
              if (data.data[0].isreal == 0) {
              // '未认证' 去认证
                that.$router.push('/pages/qualification/main')
              } else if (data.data[0].isreal == 1) {
                that.doctorInfo.ky_dept_id = that.deptInfo.dept_id  // 带上开药科室id
              // '已认证' 去挂号
                that.$router.push(
                  `/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(
                    that.doctorInfo
                  )}&key=${value}`
                )
              }
            })
        } else {
          //跳转登录页
          // console.log('用户未登录')
          let that = this
          mpvue.login({
            success (res) {
              if (res.code) {
                that.$api.wechatLogin({ code: res.code }).then((data) => {
                  that.openid = data.data.openid
                  that.key = data.data.session_key
                  if (data.data.token) {
                    that.$storage.setToken(data.data.token)
                  } else {
                    that.$router.push('/pages/center/child/login/main')
                  }
                })
              } else {
                this.$router.push('/pages/center/child/login/main')
              }
            }
          })
        }
      } else {
        //用户按了拒绝按钮
        console.log('用户按了拒绝按钮')
      }
    }
  }
}
</script>

<style scoped lang="less">
.subPage {
  // display: flex;
  // flex-direction: column;
  background: #f9f9f9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.navTop {
  height: 90rpx;
  width: 100%;
  background-color: #FFFFFF;
  // border-bottom: 1rpx solid #DDDDDD;
  border-top: 1rpx solid #DDDDDD;
  box-sizing: border-box;
  ul {
    position: relative;
    height: 100%;
    list-style: none;
    width: 100%;
    font-size: 34rpx;
    color: #666666;
    display: flex;
    li {
      flex: 1;
      text-align: center;
      line-height: 90rpx;
      // font-weight: bold;
    }
    .nowTab {
      color: #4B7AEA;
    }
  }
  .slideSpan {
    position: absolute;
    height: 5rpx;
    width: 135rpx;
    background-color: #4B7AEA;
    bottom: 2rpx;
    left: 16.5%;
    transition: left ease 0.3s;
  }
  .chooseTabSpan {
    left: 66.5%;
  }
}
.outlineContent {
  flex: 1;
  overflow-y:scroll;
}
.whiteBg {
  background: #fff;
}
.topBox {
  width: 710rpx;
  height: 90rpx;
  background: rgba(74, 100, 234, 1);
  padding-left: 40rpx;
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 90rpx;
}
.showHide {
  width: 100%;
  height: 20rpx;
  // border: 1rpx solid red;
  background: #ffffff;
  padding-bottom: 20rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  img {
    width: 60rpx;
    height: 40rpx;
  }
  div {
    width: 60rpx;
    height: 40rpx;

  }
}
.centBox {
  border-top: solid #F9F9F9 16rpx;
  background: #ffffff;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  .titBox {
    height: 96rpx;
    font-size: 36rpx;
    // font-family:PingFangSC-Medium,PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    text-align: center;
    line-height: 96rpx;
    border-bottom: 2rpx solid #F9F9F9;
  }
  .tabsClass {
    // padding: 18rpx 95rpx;
    display: flex;
    justify-content: space-between;
    z-index: 9;
    display: flex;
    .itemTabs {
      flex: 1;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
    .itemTabs2 {
      flex: 1;
      text-align: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: rgba(75, 122, 234, 1);
      border-bottom: 6rpx solid rgba(75, 122, 234, 1);
    }
  }
}
.prey {
  position: absolute;
  z-index: -9999;
  visibility: hidden;
}
.flexibleBox {
  transition: all .3s ease  0s;
}
.centerBoxHide {
  height: 220rpx;
  padding: 14rpx 40rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 60rpx;
  background: #ffffff;
}
.centerBoxShow {
  padding: 14rpx 40rpx 0 40rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 60rpx;
  background: #ffffff;
}
.nullBox {
  // height: 800rpx;
  height: 750rpx;
  background: #ffffff;
  position: relative;
  //  height:600px;/去掉高度，只能垂直居中。
  display: flex;
  justify-content: center;
  align-items: center;
  // overflow-y: auto;
  // overflow-x: hidden;
  // overflow: hidden;
  .searchDefault {
    width: 720rpx;
    height: 100%;
    position: relative;
    // line-height: 493rpx;
    margin: 0 auto;
    img {
      margin-top: 50rpx;
      width: 100%;
      height: 493rpx;
    }
  }
}
.bomAuto {
  overflow-y: auto;
  .bomBox {
    background: #F9F9F9;
    position: relative;
    //  height:600px;/去掉高度，只能垂直居中。
    display: flex;
    flex-direction: column;
    padding-bottom: 30rpx;
    // padding-bottom: 20rpx;
    // overflow-y: auto;
    // overflow-x: hidden;
    // height: 560rpx;
    // overflow: hidden;
    // height: 55%;
    .bomItem {
      margin: 29rpx;
      margin-bottom: 0rpx;
      height: 50rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.13);
      border-radius: 10rpx;
      padding: 30rpx 34rpx;
      padding-right: 0;
      display: flex;
      // flex: 1;
      // flex-direction: column;
      .dateItem {
        font-size: 34pxr;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-right: 14rpx;
        line-height: 50rpx;
        height: 50rpx;
        width: 42%;
      }
      .numItem {
        font-size: 34rpx;
        width: 120rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(255, 84, 83, 1);
        margin-right: 13rpx;
        line-height: 50rpx;
        height: 50rpx;
        text-align: center;
      }
      .btnItem {
        width: 125rpx;
        height: 52rpx;
        background: rgba(81, 114, 240, 0.1);
        border-radius: 29rpx;
        border: 1rpx solid rgba(81, 114, 240, 1);
        margin-right: 15rpx;
        text-align: center;
        line-height: 44rpx;
        font-size: 32prx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(81, 114, 240, 1);
        span {
          font-size: 32rpx;
        }
      }
      .txtTiem {
        font-size: 22rpx;
        // font-family:PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: rgba(81, 114, 240, 1);
        line-height: 56rpx;
        height: 50rpx;
      }
    }
  }
}

.modalClass {
  position: absolute;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  z-index: 9;
  // background:rgba(0,0,0,1);
  // opacity:0.6;
  .modalBox {
    width: 100%;
    // height:663rpx;
    z-index: 99;
    background: #ffffff;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    .closeBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 0rpx;
      // right: -30rpx;
      // top: -30rpx;
      img {
        width: 100%;
        height: 100%;
        z-index: 99;
      }
    }
    .modalTit {
      width: 100%;
      img {
        width: 100%;
        height: 220rpx;
      }
    }
    .modalCenter {
      padding: 67rpx 30rpx 33rpx 37rpx;
      display: flex;
      flex-direction: column;
      .dataBox {
        margin-bottom: 40rpx;
        span {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          vertical-align: top;
        }
        .itemPie {
          width: 12rpx;
          height: 12rpx;
          background: rgba(74, 100, 234, 1);
          border-radius: 50%;
          margin-right: 15rpx;
          margin-top: 13rpx;
          // vertical-align: middle;
          // margin-bottom: 5rpx;
        }
        .itemSpan {
          width: 95%;
          font-size: 14px;
          // font-family:PingFangSC-Medium,PingFang SC;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        .itemSpanRed {
          color: #ff5453;
          color: #ff5453;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          display: inline;
        }
      }
    }
    .modalFooter {
      // width:544rpx;
      height: 76rpx;
      background: rgba(74, 100, 234, 1);
      border-radius: 38rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      margin: 0 37rpx 63rpx 37rpx;
      line-height: 76rpx;
      text-align: center;
    }
    .btnDis {
      background: #c5c8ce;
    }
  }
}
</style>
